// components/leftNav.vue
<template>  
  <div>
    <el-menu default-active="goods/Goods" background-color="#fff" text-color="#262626" active-text-color="#3D9EFF" collapse-transition :collapse="collapsed" unique-opened class="el-menu-vertical-demo" router :default-active="$route.path">
      <!-- <div class="logobox">
        <img class="logoing" src="@/assets/img/logo.png" alt="">
      </div> -->
      <el-submenu  v-for="menu of allmenu" :key="menu.menuid" :index="menu.menuname">
        <template #title>
          <i class="iconfont" :class="menu.icon"></i>
          <span >{{menu.menuname}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="chmenu of  menu.menus" :index="`/${chmenu.url}`"  :key="chmenu.menuid">
            <i class="iconfont" :class="chmenu.icon"></i>
            <span>{{chmenu.menuname}}</span> 
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>      

    </el-menu>
  </div>

</template>

<script>
export default {
  data() {
    return {
      collapsed:false,
      allmenu:[],
    }
  },
  // 在创建完毕状态（里面是操作）
  created() {
    let res ={
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '基础管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 2,
              icon: 'icon-cat-skuQuery',
              menuname: '房间管理',
              hasThird: 'N',
              url: 'goods/Goods',
              menus: null
            }
          ]
        },
        {
          menuid: 33,
          icon: 'li-icon-dingdanguanli',
          menuname: '订单管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 34,
              icon: 'icon-order-manage',
              menuname: '交易订单',
              hasThird: 'N',
              url: 'pay/Order',
              menus: null
            }
          ]
        },
        {
          menuid: 71,
          icon: 'li-icon-xitongguanli',
          menuname: '系统管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 72,
              icon: 'icon-cus-manage',
              menuname: '用户管理',
              hasThird: 'N',
              url: 'system/user',
              menus: null
            },          
            
            {
              menuid: 74,
              icon: 'icon-cs-manage',
              menuname: '酒店管理',
              hasThird: 'N',
              url: 'system/Dept',
              menus: null
            }
          ]
        },     
         
        {
          menuid: 150,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '图表',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '数据可视化',
              hasThird: 'N',
              url: 'charts/statistics',
              menus: null
            }
          ]
        }
      ],
      msg: 'success'
      }
    this.allmenu=res.data;
    this.bus.$on("switch",value=>{
      this.collapsed=!value;
    })
  },//
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse){
  width: 240px;
  min-height: 400px;
  border: none;
  text-align: left;
  padding-left: 10px;
}

.el-menu-item-group__title {
    padding:0;    
}
span{
  padding-left: 10px;
}
/* .el-submenu__title:hover {
  color: #3D9EFF;
} */
</style>